import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {

    /* 
    使用NavLink或则Link进行跳转 被称为声明式路由导航
    使用navight方法进行路由跳转,被称为编程式路由导航
    
    */

    /* 
    useNavigate调用之后返回一个方法
    这个方法里面可以书写路径
    navigate方法:
      -参数1:是to的地址
      -参数2:配置对象,可以写一个state属性,就是state传参
    */

    

    const navigate = useNavigate()

    const toMusicHandle = ()=>{
        navigate('/main/home/music?user=张&id=001',{
          state:[
            {id:'1',name:'老李'},
            {id:'2',name:'老王'},
            {id:'3',name:'老张'}

          ]
        })
    }

    const toNewsHandle = ()=>{
        navigate('/main/home/news?user=张&id=002',{
          state:[
            {id:'1',name:'张三'},
            {id:'2',name:'李四'},
            {id:'3',name:'王二麻子'},
          ]
        })
    }

  return (
    <div>
        <h1>我是Home的内容</h1>
        <button onClick={toMusicHandle}>Music</button>
        <button onClick={toNewsHandle}>News</button>
        <Outlet/>
    </div>
  )
}
